<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Vue-echarts</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
    <style type="text/css">
        body {
            margin: 0px !important;
        }

        #app {
            margin: 0 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .map {
            position: absolute; /* 只能是绝对布局 */
            top: 0;
            bottom: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="app">
    <mapgis-web-scene
            :animation="false"
            :timeline="false"
            v-on:load="handleLoad"
            lib-path="./static/libs/cdn/cesium/Cesium.js"
            plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
    >
        <mapgis-3d-arcgis-tile-layer
                :base-url="baseUrl"
                :layer-style="layerStyle">
        </mapgis-3d-arcgis-tile-layer>
        <mapgis-3d-mapv-layer :geojson="geojson" :options="options">
        </mapgis-3d-mapv-layer>
    </mapgis-web-scene>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                options: {
                    context: '2d',
                    fillStyle: 'rgba(55, 50, 250, 0.8)',
                    size: 40,
                    globalAlpha: 0.5,
                    label: {
                        show: true,
                        fillStyle: 'white',
                        shadowColor: 'yellow',
                        font: '15px Arial',
                        shadowBlur: 10
                    },
                    gradient: {
                        0: "rgba(49, 54, 149, 0)",
                        0.2: "rgba(69,117,180, 0.7)",
                        0.3: "rgba(116,173,209, 0.7)",
                        0.4: "rgba(171,217,233, 0.7)",
                        0.5: "rgba(224,243,248, 0.7)",
                        0.6: "rgba(254,224,144,0.7)",
                        0.7: "rgba(253,174,97,0.7)",
                        0.8: "rgba(244,109,67,0.8)",
                        0.9: "rgba(215,48,39,0.8)",
                        0.95: "rgba(165, 0, 38,0.8)"
                    },
                    shadowColor: 'rgba(255, 255, 50, 1)',
                    shadowBlur: 10,
                    max: 100,
                    draw: 'grid'
                },
                geojson: {},
                baseUrl: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
                layerStyle: {
                    visible: true,
                    opacity: 1,
                    zIndex: 2
                }
            };

        },
        mounted() {
            this.initData();
        },
        methods: {
            handleLoad(e) {
                console.log('地图加初始化完毕！', e);
            },
            initData() {
                var vm = this;
                var randomCount = 500;
                var data = [];
                while (randomCount--) {
                    data.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [75 + Math.random() * 50, 20.3 + Math.random() * 20]
                        },
                        properties:{
                            count: 30 * Math.random()
                        },
                    });
                }
                ;
                vm.geojson = {
                    "features": data
                }
            },
        }
    });
</script>
</body>
</html>
